<template>
  <div class="box">
    <div id="echarts"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
  // console.log(11111111111111111111111111);
  let mychart = echarts.init(document.querySelector("#echarts"));
  let option = {
    title: {
      text: "人员投入分析(人)",
      left: "center",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      type: "scroll",
      // orient: "vertical",

      left: 70,
      top: 40,
      bottom: 20,
      // data: data.legendData,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "cross",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      top: "30%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          color: "#fff",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "#fff",
        },
        axisTick: {
        },
        splitLine: {

          show: false,


        },
      },
    ],
    series: [
      {
        name: "蓝色",
        type: "line",
        smooth: true,
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [
          120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210,
        ],
      },
      {
        name: "绿色",
        type: "line",
        stack: "Total",
        smooth: true,
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [
          220, 182, 191, 234, 290, 191, 234, 290, 330, 90, 330, 90, 230, 210,
        ],
      },
      {
        name: "黄色",
        type: "line",
        stack: "Total",
        smooth: true,
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410, 191, 234, 290, 330, 90, 50],
      },
    ],
  };
  mychart.setOption(option);
});
</script>

<style scoped>
.box {
  height: 100%;
}
#echarts {
  width: 288px;
  height: 268px;
  /* background-color: yellowgreen; */
  flex: 1;
}
</style>